<template>
  <h1>首页</h1>
<!--  如果用户的信息为ong,则说明没有用户登录,则战术 注册 登录连接 -->
  <div v-if="user==null">
    <router-link to="/reg">注册</router-link>&nbsp;
    <router-link to="/login">登录</router-link>
  </div>

<!--  如果用户信息不为空,则说明已登录,展示欢迎信息与发微博登录按钮-->
  <div v-else>
    <h2>欢迎{{user.nickname}}</h2>
    <router-link to="/post">
      <el-button>发微博</el-button>
    </router-link>
    <router-link to="/personal">
      <el-button>我得微博</el-button>
    </router-link>
    <el-button @click="logout()" >退出登录</el-button>
  </div>

  <hr>
  <!--  无论谁登录,都能看到已发布的微博-->
  <div v-for="weibo in arr">
    <!--    将页面数据与arr数组进行绑定,只要arr有数据,就可以显示出内容-->
    <router-link :to="'detail?id='+weibo.id" style="text-decoration: none;color: #555">
      <h3>{{ weibo.nickname }}说:{{ weibo.content }}</h3>
<!--      <p>{{weibo.imgUrls}}</p>-->
<!--
      一定要做非空判断,如果不做非空判断就会报错
-->
      <img v-if="weibo.imgUrls!=null"
          :src="BASE_URL+ url"
           width="100px"
           v-for="url in weibo.imgUrls.split(',')" >
    </router-link>

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";

const user = ref(localStorage.user?JSON.parse(localStorage.user):null);
console.log(user.value);

const logout=()=>{
  if (confirm('您确定要删除吗?')){
    localStorage.clear();
    user.value=null;
  }
}

const arr = ref([]);

//  页面加载完毕立即执行的方法
onMounted(() => {
//  向后端发送请求获取所有的微博数据
  axios.get( BASE_URL+"/v1/weibos/list").then((response) => {
    //如果成功请求回来的数据
    if (response.data.code == 2002) {
      // 将请求回来的数据存入Arr数组中
      arr.value = response.data.data;
    }
  });
});
</script>

<style>

</style>